<!-- 组件 -->
<template>
  <div class="search-box">
    <input
      class="search-box-content"
      :value="searchText"
      @input="$emit('input', $event.target.value)"
      type="text"
      placeholder="请输入关键词搜索"
      ref="searchInput"
    />
    <div class="search-box-regex" @click="$emit('regexButtonClick')" title="正则">
      <svg
        :style="isOpenRegex ? 'background: #ddd;' : ''"
        viewBox="0 0 1821 1024"
        xmlns="http://www.w3.org/2000/svg"
        width="18"
        height="18"
      >
        <path
          d="M496.666667 888.4c0-48.666667 37.2-89.733333 86-89.733333 50.8 0 88.133333 41.2 88.133333 89.733333 0 52.933333-37.2 88.133333-88.133333 88.133333-54.8-2-86-39.2-86-88.133333z m828-622.4l-190.933334 37.333333 133.6 167.066667-82.533333 56.8L1077.733333 342.666667 969.333333 527.2l-82.533333-56.8 132.666667-167.066667-192.133334-37.333333 33.466667-92.933333 182 69.733333-17.333333-210.8H1129.333333l-18 210.933333L1293.333333 173.2l31.333334 92.8z"
          fill="#000"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  model: {
    prop: 'searchText',
    event: 'input',
  },
  props: {
    searchText: {
      type: String,
      default: '',
    },
    isOpenRegex: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.$refs.searchInput.focus();
  },
  components: {},
};
</script>

<style scoped>
.search-box {
  padding: 6px 8px;
}
.search-box-content {
  font-size: 12px;
  width: 100%;
  height: 100%;
  outline: none;
  border: 0;
}
.search-box-regex {
  position: absolute;
  right: 10px;
  top: 5px;
}
</style>
